<template>
  <div class="wrapper">
    <template>
      <swiper :options="swiperOption">

        <swiper-slide v-for="item of swiperList">
          <img class="swiper-img" :src="item.imgUrl">
        </swiper-slide>

        <div class="swiper-pagination"  slot="pagination"></div>

      </swiper>
    </template>
  </div>
</template>

<script>
  export default {
    name: "HomeSwiper",
    data(){
      return{
        swiperOption:{
          pagination: '.swiper-pagination',  //出现了一个点
          loop: true,   //轮播可以循环
        },
        swiperList:[{
          id: '001',
          imgUrl:'http://img1.qunarzz.com/piao/fusion/1807/c6/44fce1467be17702.jpg_750x200_406f5fc3.jpg'
        },{
          id: '002',
          imgUrl:'http://img1.qunarzz.com/piao/fusion/1807/e7/d70d0830a9941b02.jpg_750x200_f8c7d2ad.jpg'
        }]
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .wrapper >>> .swiper-pagination-bullet-active{
    background:#fff;
  }
  .wrapper{
    overflow: hidden;
    width:100%;
    height:0; //这个高为0，大神的技巧啊
    padding-bottom: 26.67%  //就是如果高100%，宽的比例就是31.25%
    .swiper-img{
      width:100%
    }
  }
</style>
